<ui:composition template="../principal.xhtml"
                xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:p="http://primefaces.org/ui"
                xmlns:c="http://java.sun.com/jsp/jstl/core">
    <ui:define name="principal">
        <h2>Gerenciar Estoque</h2>

        <h:form id="breadcrumb">
            <p:breadCrumb styleClass="navegacao" style="margin-top: 5px; margin-bottom: 40px">  
                <c:if test="#{loginMB.dentista.contaUsuario.tipo == 'AD'}" >  
                    <p:menuitem value="Categories" url="../user-master/menuMaster.xhtml" />  
                </c:if>
                <c:if test="#{loginMB.dentista.contaUsuario.tipo == 'DE'}" >  
                    <p:menuitem value="Categories" url="../user-simple/menuDentista.xhtml" />  
                </c:if>
                <p:menuitem value="Clínica" url="../clinica/adminClinica.xhtml" />  
                <p:menuitem value="Gerenciar Estoque" url="gerenciarEstoque.xhtml" />
            </p:breadCrumb>
        </h:form>

        <h:form id="cad">
            <p:growl id="message"/>
            <p:fieldset legend="NOVO ITEM DE ESTOQUE" toggleable="true" toggleSpeed="500" styleClass="grupo-form">
                <h:panelGrid columns="2" styleClass="table-form" cellspacing="10">
                    <h:outputLabel for="nome" value="*Nome: " />  
                    <p:inputText id="nome" title="nome" value="#{gerenciarEstoqueMB.itemEstoque.nome}" required="true" label="Nome" size="50" />
                    <h:outputLabel for="descricao" value="*Descrição: " />  
                    <p:inputTextarea id="descricao" title="descricao" value="#{gerenciarEstoqueMB.itemEstoque.descricao}" required="true" label="Descrição" cols="50" />
                    <h:outputLabel for="fornecedor" value="*Fornecedor: " />
                    <p:inputText id="fornecedor" title="fornecedor" value="#{gerenciarEstoqueMB.itemEstoque.fornecedor}" required="true" label="Fornecedor" size="50"/>
                    <h:outputLabel for="preco" value="*Preço: " />
                    <p:inputText id="preco" title="preco" value="#{gerenciarEstoqueMB.itemEstoque.preco}" required="true" label="Preço" size="20" >
                        <f:convertNumber pattern="#,##0.00"></f:convertNumber>  
                        <f:validator validatorId="MoedaValidator"  />
                    </p:inputText>

                    <h:outputLabel for="quantidade" value="*Quantidade em Estoque: " />
                    <p:inputText id="quantidade" title="quantidade" value="#{gerenciarEstoqueMB.itemEstoque.quantidade_estoque}" required="true" label="Quantidade em Estoque" size="10" >
                        <f:convertNumber integerOnly="true"/>
                    </p:inputText>
                </h:panelGrid>
            </p:fieldset>
            <h:panelGrid columns="1" style="text-align: right; width: 100%;">
                <p:commandButton id="salvar" value="Salvar" update=":cad, :dados" action="#{gerenciarEstoqueMB.salvarItemEstoque()}" image="ui-icon ui-icon-disk" style="font-size: 15px;" />
            </h:panelGrid>
        </h:form>

        <p:separator style="margin-top: 20px; margin-bottom: 20px;"/>

        <h:form id="dados">
            <p:dataTable id="table-itens" value="#{gerenciarEstoqueMB.itensEstoqueTodos}" var="item" widgetVar="estoqueTable" tableStyle="width:100%" paginator="true" rows="10"  
                         paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"  
                         rowsPerPageTemplate="5,10,15" paginatorPosition="bottom" paginatorAlwaysVisible="false" emptyMessage="Sem itens cadastrados.">

                <f:facet name="header">  
                    ITENS DE ESTOQUE CADASTRADOS
                </f:facet>

                <p:column headerText="ID" sortBy="#{item.id}" filterMatchMode="contains" filterBy="#{item.id}" filterStyle="display:none;">  
                    <h:outputText value="#{item.id}" />  
                </p:column>
                <p:column headerText="NOME" sortBy="#{item.nome}" filterMatchMode="contains" filterBy="#{item.nome}" filterStyle="display:none;">  
                    <h:outputText value="#{item.nome}" />  
                </p:column>
                <p:column headerText="FORNECEDOR" sortBy="#{item.fornecedor}" filterMatchMode="contains" filterBy="#{item.fornecedor}" filterStyle="display:none;" >  
                    <h:outputText value="#{item.fornecedor}" />  
                </p:column>
                <p:column headerText="PREÇO" sortBy="#{item.preco}" filterMatchMode="contains" filterBy="#{item.preco}" filterStyle="display:none;" >  
                    <h:outputText value="R$ #{item.preco}"  />
                </p:column>
                
                <p:column headerText="QUANT" sortBy="#{item.quantidade_estoque}" >  
                    <h:outputText value="#{item.quantidade_estoque} un(s)"  />
                </p:column>

                <p:column style="width:110px">    
                    <p:commandButton id="selectButton" update=":entrada" oncomplete="entradaDialog.show()" icon="ui-icon-circle-plus" title="Entrada de Estoque">  
                        <f:setPropertyActionListener value="#{item}" target="#{gerenciarEstoqueMB.itemEstoqueSelecionado}" />
                    </p:commandButton> 
                    <p:commandButton id="selectButton2" update=":saida" oncomplete="saidaDialog.show()" icon="ui-icon-circle-minus" title="Saida de Estoque">  
                        <f:setPropertyActionListener value="#{item}" target="#{gerenciarEstoqueMB.itemEstoqueSelecionado}" />
                    </p:commandButton> 
                    <p:commandButton id="selectButton3" update=":dados:display" oncomplete="itemDialog.show()" icon="ui-icon-search" title="Ver">  
                        <f:setPropertyActionListener value="#{item}" target="#{gerenciarEstoqueMB.itemEstoqueSelecionado}" />
                    </p:commandButton>
                </p:column>

                <f:facet name="footer">  
                    <p:outputPanel style="float: right">  
                        <h:outputText value="BUSCAR: " />  
                        <p:inputText id="globalFilter" onblur="estoqueTable.filter()" style="width:200px" />  
                    </p:outputPanel> 
                </f:facet>

            </p:dataTable>


            <p:blockUI block="table-itens" trigger="table-itens, :cad:salvar">  
                Carregando...<br />  
                <p:graphicImage library="images" name="loader.gif"/>  
            </p:blockUI> 

            <p:dialog header="Detalhes do Item de Estoque" widgetVar="itemDialog" resizable="false" id="itemDlg" dynamic="true" 
                      showEffect="fade" hideEffect="fade" modal="true">
                <h:panelGrid id="display" columns="1" width="400">
                    <h:panelGrid columns="2" cellspacing="10">
                        <h:outputText value="NOME: " styleClass="rotulo" />
                        <h:outputText value="#{gerenciarEstoqueMB.itemEstoqueSelecionado.nome}" style="font-weight:bold"/>                   

                        <h:outputText value="FORNECEDOR: " styleClass="rotulo" />
                        <h:outputText value="#{gerenciarEstoqueMB.itemEstoqueSelecionado.fornecedor}" style="font-weight:bold"/>

                        <h:outputText value="VALOR: " styleClass="rotulo" />
                        <h:outputText value="R$ #{gerenciarEstoqueMB.itemEstoqueSelecionado.preco}" style="font-weight:bold"/>

                        <h:outputText value="QUANTIDADE: " styleClass="rotulo" />
                        <h:outputText value="#{gerenciarEstoqueMB.itemEstoqueSelecionado.quantidade_estoque} unidade(s)" style="font-weight:bold"/>
                    </h:panelGrid>

                    <h:panelGrid columns="1" cellspacing="10">
                        <h:outputText value="DESCRIÇÃO: " />
                        <h:outputText value="#{gerenciarEstoqueMB.itemEstoqueSelecionado.descricao}" style="font-weight:bold"/>
                    </h:panelGrid>

                </h:panelGrid>


                <h:panelGrid columns="2" style="float: right">
                    <p:commandButton value="Excluir" onclick="confirmation.show()" icon="ui-icon-trash" type="button" />
                    <p:commandButton value="Atualizar" update=":cad" action="#{gerenciarEstoqueMB.atualizarItemEstoque()}" icon="ui-icon-refresh" oncomplete="itemDialog.hide();" />
                </h:panelGrid>
            </p:dialog>

            <p:confirmDialog id="confirmDialog" message="Tem certeza que deseja excluir o Item de Estoque?" header="Excluir Dentista" severity="alert" widgetVar="confirmation">  
                <p:commandButton id="confirm" value="Confirmar" update=":dados, :cad" oncomplete="confirmation.hide()" action="#{gerenciarEstoqueMB.excluirItemEstoque()}" />  
                <p:commandButton id="decline" value="Cancelar" onclick="confirmation.hide()" type="button" />   
            </p:confirmDialog>
        </h:form>

        <h:form id="entrada">
            <p:dialog header="Entrada de Estoque" widgetVar="entradaDialog" resizable="false" id="entradaDlg" dynamic="true" 
                      showEffect="fade" hideEffect="fade" modal="true">

                <h:panelGrid columns="2" cellspacing="4" width="400">
                    <h:outputText value="NOME: " styleClass="rotulo" />
                    <h:outputText value="#{gerenciarEstoqueMB.itemEstoqueSelecionado.nome}" style="font-weight:bold"/>

                    <h:outputLabel for="quantidade" value="Quantidade: " styleClass="rotulo" />
                    <p:inputText id="quantidade1" title="quantidade" value="#{gerenciarEstoqueMB.quantidadeEntrada}" label="Quantidade em Estoque" size="10" >
                        <f:convertNumber integerOnly="true"/>
                    </p:inputText>
                </h:panelGrid>

                <h:panelGrid columns="2" style="float: right">
                    <p:commandButton value="Salvar" update=":cad:message, :dados" action="#{gerenciarEstoqueMB.entradaEstoque()}"  icon="ui-icon-trash" type="submit" oncomplete="entradaDialog.hide()" />
                </h:panelGrid>

            </p:dialog>
        </h:form>
        <h:form id="saida">
            <p:dialog header="Saída de Estoque" widgetVar="saidaDialog" resizable="false" id="saidaDlg" dynamic="true" 
                      showEffect="fade" hideEffect="fade" modal="true">
                <h:panelGrid id="saida" columns="2" cellspacing="4" width="400">
                    <h:outputText value="NOME: " styleClass="rotulo" />
                    <h:outputText value="#{gerenciarEstoqueMB.itemEstoqueSelecionado.nome}" style="font-weight:bold"/>

                    <h:outputLabel for="quantidade" value="Quantidade: " styleClass="rotulo" />
                    <p:inputText id="quantidade2" title="quantidade" value="#{gerenciarEstoqueMB.quantidadeSaida}" label="Quantidade em Estoque" size="10" >
                        <f:convertNumber integerOnly="true"/>
                    </p:inputText>
                </h:panelGrid>

                <h:panelGrid columns="2" style="float: right">
                    <p:commandButton value="Salvar" update=":cad:message, :dados" action="#{gerenciarEstoqueMB.saidaEstoque()}"  icon="ui-icon-trash" type="submit" oncomplete="saidaDialog.hide()" />
                </h:panelGrid>
            </p:dialog>
        </h:form>

    </ui:define>
</ui:composition>